<template>
    <div class="downList-wrapper">
        <div class="item-wrapper flex"  v-for="(item,index) in downList" :key="index" @click="clickEvent(index)" >
            <div class="icon-wrapper">
                 <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
            </div>
            <div class="content">
               <span>{{item.content}}</span>
            <div class="line" v-if="index!==count-1"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
             downList:[
            {
                icon:'#icon-liaotian',
                content:'发起群聊'
            },
            {
                icon:'#icon-qunliao',
                content:'添加朋友'
            },
            {
                icon:'#icon-saoyisao-tianchong',
                content:'扫一扫'
            },
            {
                icon:'#icon-yishoukuan',
                content:'收付款'
            },
            {
                icon:'#icon-ai-i',
                content:'帮助与反馈'
            }
        ]
        }
    },
    computed: {
        count(){
            return this.downList.length
        }
    },
    methods:{
        clickEvent(e){
            switch(e){
                case 0:this.$router.push('/createGroup');break;
                case 1:this.$router.push('/addFriend');break;
                default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
            }
        }
    }
}
</script>
<style scoped>
   .downList-wrapper{
       position: relative;
       top:.6rem;
       background-color: #4B4B4B;
       width: 5.7rem;
       border-radius: .2rem;
       z-index: 101;
       padding-bottom: .4rem;
   } 
   .downList-wrapper:after{
        content: "";
        width: 0;
        height: 0;
        border: .2rem solid;
        border-color: transparent transparent #4B4B4B;
        position: absolute;
        top:-.4rem;
        right: .4rem; 
   }
   .item-wrapper{
       color:#ffffff; 
       margin-left: .4rem;
        padding-top: .4rem;
   }
   .icon{
        font-size: .8rem;
        color:#ffffff;
   }
   .content{
       position: relative;
       margin-left: .4rem;
       font-size: .6rem;
       line-height: 1.2rem;
   }
   .line{
       position: absolute;
       width: 4rem;
       height: 0;
       border-top: .05rem solid #5B5B5B;
       bottom: -.2rem;
   }
</style>